<template>
  <div class="my-container" style="margin:20px auto">
    <!-- 左边 -->
    <el-card class="left-box-card">
      <!-- 我的 -->
      <div class="my">
        <div class="left">
          <el-avatar :size="118" :src="userInfo.avatar" />
        </div>
        <div class="center">
          <p>{{ userInfo.nickname }}</p>
          <p>
            <a>312<span>获赞</span></a>
            <a>{{ follerdlist }}<span>粉丝</span></a>
            <a>{{ follerlist }}<span>关注</span></a>
          </p>
          <p>简介：{{ userInfo.introduce || 'TA很懒，还没有添加简介' }}</p>
        </div>
        <div v-if="isedit" class="right">
          <el-button round icon="el-icon-edit" size="small" @click="$router.push({ name: 'NewsUserSettings' })">编辑资料
          </el-button>
        </div>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="历史" name="history">
          <historyItem :data="history" />
        </el-tab-pane>
        <el-tab-pane label="收藏" name="collection">
          <collectionItem :data="collection" />
        </el-tab-pane>
        <el-tab-pane label="评论" name="comments">
          <commentItem :data="comment" />
        </el-tab-pane>
        <el-tab-pane label="点赞" name="likes">
          <likesItem :data="likes" />
        </el-tab-pane>
        <el-tab-pane label="关注" name="focus">
          <focus :data="followings" @refresh="getUserFollowings" />
        </el-tab-pane>
        <el-tab-pane label="粉丝" name="fans">
          <fans :data="followers" />
        </el-tab-pane>
        <el-tab-pane label="文章" name="article">
          <articleItem :data="article" />
        </el-tab-pane>
        <el-tab-pane v-if="this.user_id == userId" label="举报" name="accusation">
          <accusation :data="accusation" @refresh="getUserReport" />
        </el-tab-pane>
      </el-tabs>
      <div style="margin:10px">
        <el-pagination
          v-if="total > 0"
          background
          :current-page="query.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import historyItem from '@/news/views/components/item'
import collectionItem from '@/news/views/components/item'
import likesItem from '@/news/views/components/item'
import articleItem from '@/news/views/components/articleItem'
import fans from '@/news/views/components/Friends'
import focus from '@/news/views/components/focus'
import commentItem from '@/news/views/components/commentItem'
import accusation from '@/news/views/components/accusation'
import { getUserFollowers, getUserFollowings, getUserHomePage, myfollowers } from '@/api/news/pc-web/user'
import { getUserComment } from '@/api/news/pc-web/comment'
import { getUserArticleViewHistory, getUserArticleCollections, getUserArticleLikings, getUserArticle, getUserReport, getmylist } from '@/api/news/pc-web/article'
import { deepEqual } from 'assert'
export default {
  name: 'User',
  components: {
    historyItem,
    collectionItem,
    likesItem,
    fans,
    focus,
    commentItem,
    articleItem,
    accusation
  },
  data() {
    return {
      activeName: 'likes',
      history: {},
      isedit: false,
      collection: {},
      likes: {},
      followers: {},
      followings: {},
      comment: {},
      query: {
        pageNum: 1, // 分页页码
        pageSize: 10 // 页面数据条数
      },
      total: 0,
      article: {},
      accusation: {},
      follerdlist: null, // 粉丝
      follerlist: null, // 关注

      userInfo: {},
      user_id: this.$route.params.user_id
    }
  },
  watch: {
    '$route'(to, from) { // 监听路由是否变化
      console.log(to, from)
      console.log(to, from)
      if (to.params.user_id != from.params.user_id) {
        this.user_id = to.params.user_id
        this.getUserHomePage(this.user_id)
        this.getLikings(this.user_id)
      }
      if (to.hash != from.hash) {
        if (to.hash === '#collection') {
          this.activeName = 'collection'

          search('collection')
          this.getCollection(this.user_id)
        } else if (to.hash === '#history') {
          this.getHistory(this.user_id)

          search('history')
        } else {
          this.activeName = 'likes'
        }
      }
    },
    deep: true
  },
  created() {
    if (getToken()) {
      if (this.$route.params.user_id == this.$store.state.user.userInfo.id) {
        this.isedit = true
      }

      this.myfollowerslist()
    }
    if (this.$route.hash && this.user_id) {
      if (this.$route.hash == '#collection') {
        this.getCollection(this.user_id)
        this.activeName = 'collection'
      }
      if (this.$route.hash == '#history') {
        this.getHistory(this.user_id)
        this.activeName = 'history'
      }
      if (this.$route.hash == '#comments') {
        this.getUserComment(this.user_id)
        this.activeName = 'comments'
      }
      // if(this.$route.hash=='#likes'){
      //   this.getLikings(this.user_id)
      //   this.activeName = 'likes'
      // }
    }

    if (this.user_id) {
      this.getUserHomePage(this.user_id)
      this.getLikings(this.user_id)
    }
  },
  computed: {
    ...mapGetters(['avatar', 'userId', 'name'])
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageSize = val
      // this.getArticleList()
      if (this.activeName == 'history') {
        this.getHistory(this.user_id)
      } else if (this.activeName == 'collection') {
        this.getCollection(this.user_id)
      } else if (this.activeName == 'comments') {
        this.getUserComment(this.user_id)
      } else if (this.activeName == 'likes') {
        this.getLikings(this.user_id)
      } else if (this.activeName == 'focus') {
        this.getUserFollowings(this.user_id)
      } else if (this.activeName == 'fans') {
        this.getFollowers(this.user_id)
      } else if (this.activeName == 'article') {
        this.getUserArticle(this.user_id)
      } else if (this.activeName == 'accusation') {
        this.getUserReport(this.user_id)
      }
    },
    handleCurrentChange(val) {
      this.query.pageNum = val

      if (this.activeName == 'history') {
        this.getHistory(this.user_id)
      } else if (this.activeName == 'collection') {
        this.getCollection(this.user_id)
      } else if (this.activeName == 'comments') {
        this.getUserComment(this.user_id)
      } else if (this.activeName == 'likes') {
        this.getLikings(this.user_id)
      } else if (this.activeName == 'focus') {
        this.getUserFollowings(this.user_id)
      } else if (this.activeName == 'fans') {
        this.getFollowers(this.user_id)
      } else if (this.activeName == 'article') {
        this.getUserArticle(this.user_id)
      } else if (this.activeName == 'accusation') {
        this.getUserReport(this.user_id)
      }
      // this.getArticleList()
    },
    async myfollowerslist() {
      console.log(this.$route.params.user_id, 'this.$route.params.user_id')

      const user_id = this.$route.params.user_id
      const res = await myfollowers(user_id)
      console.log(res, 'listlist')

      this.follerdlist = res.follerdlist

      this.follerlist = res.follerlist
    },
    serach(type) {
      this.activeName = type
    },
    handleClick() {
      this.query.pageNum = 1
      this.query.pageSize = 10

      if (this.activeName == 'history') {
        this.getHistory(this.user_id)
      } else if (this.activeName == 'collection') {
        this.getCollection(this.user_id)
      } else if (this.activeName == 'comments') {
        this.getUserComment(this.user_id)
      } else if (this.activeName == 'likes') {
        this.getLikings(this.user_id)
      } else if (this.activeName == 'focus') {
        this.getUserFollowings(this.user_id)
      } else if (this.activeName == 'fans') {
        this.getFollowers(this.user_id)
      } else if (this.activeName == 'article') {
        this.getUserArticle(this.user_id)
      } else if (this.activeName == 'accusation') {
        this.getUserReport(this.user_id)
      }
    },
    // 获取用户信息
    async getUserHomePage(user_id) {
      const user = await getUserHomePage(user_id)
      this.userInfo = user
    },
    // 获取用户举报文章列表
    async getUserReport(user_id) {
      this.accusation = await getUserReport(user_id, this.query)
      this.query.pageNum = Number(this.accusation.pageNum)
      this.query.pageSize = Number(this.accusation.pageSize)
      this.total = this.accusation.total
    },
    // 获取用户文章列表
    async getUserArticle(user_id) {
      this.article = await getUserArticle(user_id, this.query)

      this.query.pageNum = Number(this.article.pageNum)
      this.query.pageSize = Number(this.article.pageSize)
      this.total = this.article.total
    },
    // 获取用户评论列表
    async getUserComment(user_id) {
      this.comment = await getUserComment(user_id, this.query)

      this.query.pageNum = Number(this.comment.pageNum)
      this.query.pageSize = Number(this.comment.pageSize)
      this.total = this.comment.total
    },
    // 获取用户关注列表
    async getUserFollowings(user_id) {
      this.followings = await getUserFollowings(user_id, this.query)

      this.query.pageNum = Number(this.followings.pageNum)
      this.query.pageSize = Number(this.followings.pageSize)
      this.total = this.followings.total
    },
    // 获取用户粉丝列表
    async getFollowers(user_id) {
      this.followers = await getUserFollowers(user_id, this.query)

      this.query.pageNum = Number(this.followers.pageNum)
      this.query.pageSize = Number(this.followers.pageSize)
      this.total = this.followers.total
    },
    // 获取用户浏览文章历史记录
    async getHistory(user_id) {
      this.history = await getUserArticleViewHistory(user_id, this.query)

      this.query.pageNum = Number(this.history.pageNum)
      this.query.pageSize = Number(this.history.pageSize)
      this.total = this.history.total
    },
    // 获取用户收藏文章列表
    async getCollection(user_id) {
      this.collection = await getUserArticleCollections(user_id, this.query)

      this.query.pageNum = Number(this.collection.pageNum)
      this.query.pageSize = Number(this.collection.pageSize)
      this.total = this.collection.total
    },
    // 获取用户点赞文章列表
    async getLikings(user_id) {
      this.query.user_id
      this.likes = await getmylist(user_id, this.query)
      this.query.pageNum = Number(this.likes.pageNum)
      this.query.pageSize = Number(this.likes.pageSize)
      this.total = this.likes.total
    }
  }
}
</script>
<style lang="scss" scoped>
.my-container {
  margin-top: 15px;
  width: 851px;
  min-width: 851px;
  // height: 100vh;
}

.my {
  margin-top: 28px;
  width: 100%;
  height: 118px;
  // background: rgb(236, 233, 233);
  display: flex;

  .left {
    width: 118px;

    .el-avatar {
      border: 4px solid #eee
    }
  }

  .center {
    margin: 8px 30px 0 50px;
    width: 526px;

    p {
      margin: 0;
    }

    p:nth-child(1) {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 15px;
    }

    p:nth-child(2) {
      margin-bottom: 15px;

      a {
        font-weight: 500;
        font-size: 24px;
        margin-right: 20px;
      }

      span {
        font-weight: 400;
        margin-left: 3px;
        font-size: 15px;
      }

    }

    p:nth-child(3) {
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; //隐藏文字
    }
  }

  .right {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
}

.el-tabs {
  margin-top: 48px;
  ;
  // height: 100vh;
}
</style>
